<template>
	<div class='rdetail' style='height: 100%; width: 100%;'>
		
		<div class='content' ref="content" v-html="bookDetail.post_content || detail.post_content"></div>

		<div class='btn-wrap'>
			<i class='left' @click="prevPage"></i>
			<i class='right' @click="nextPage"></i>
		</div>

		<div class='page'>
			<p>{{ bookDetail.post_title || detail.post_title }}</p>
			<span class='status'><em>{{ activePage }}</em> / <em>{{ count }}</em></span>
		</div>

		<div class='clickme' @click="alert">
			<Icon type="social-yen-outline"></Icon>
			给我赞赏
		</div>

		<alert :hidden="shoWx" btnText="我已赞赏" @close="alert" @clickBtn="clickBtn">
			<div class="pic-wrap" slot='ac'>
				<img src="./we.jpg" alt="。。。" />
			</div>
		</alert>
	</div>
</template>

<script>
	import {mapState} 	from 'vuex'
	import $ 			from 'jquery'
	import Alert 		from 'base/alert'

	export default{
		components: {
			Alert
		},
		data() {
			return {
				value4		: 665,
				topShow		: false,
				bottomShow	: false,
				activeTab	: 0,
				loading		: true,
				isIndex		: true,
				activePage  : 1,
				shoWx 		: false,
				count   	: '-',
				detail      : {},
				bottomTabs: [{
					icon: 'home',
					name: '首页'
				},{
					icon: 'load-a',
					name: '商城'
				},{
					icon: 'person',
					name: '我的'
				}]
			}
		},
		computed: {
			...mapState({
				'bookDetail': state => state.bookDetail
			})	
		},
		created() {
			setTimeout(() => {
				this.topShow 	= true
				this.bottomShow = true
				this.loading 	= false
			}, 2000)

			setTimeout(() => {
				this.el  				= this.$refs.content
				this.allWidth    		= this.el.scrollWidth
				this.width 				= window.innerWidth + 16
				this.count      		= Math.ceil(this.allWidth / this.width)
			}, 40)

			this.getPostContent(this.bookDetail.object_id || this.$route.query.id)
		},
		updated() {
			this.autoAlign()
		},
		activated() {
			this.getPostContent(this.bookDetail.id || this.$route.query.id)
		},
		methods: {
			getPostContent(id) {
				this.HttpService.getPostContent({id: id}).then(data => {
					if(!data.status) {
						this.$store.commit('setBookDetail', data.data)
						this.detail = data.data
					} else {
						this.$Message.error(data.msg)
						setTimeout(() => {
							this.$router.go(-2)
						}, 1000)
					}
				})
			},
			prevPage() {
				this.activePage -= 1
				if(this.activePage <= 0) {
					this.activePage = this.count
				}

				$(this.el.offsetParent).animate({scrollLeft: (this.activePage - 1) * this.width})

			},
			nextPage() {
				this.activePage += 1
				if(this.activePage > this.count) {
					this.activePage = 1
				}

				console.log(this.el.offsetParent)

				$(this.el.offsetParent).animate({scrollLeft: (this.activePage - 1) * this.width})
			},
			autoAlign() {
				this.el  				= this.$refs.content
				this.allWidth    		= this.el.scrollWidth
				this.width 				= window.innerWidth + 16
				this.count      		= Math.ceil(this.allWidth / this.width)
			},
			login() {

			},
			getConfig() {
		      this.HttpService.getGlobalConfig().then(data => {
		        if (data) {
		          this.config = data.config
		          // this.$store.commit('setTicketCount', data.config.num)
		        }
		      })

		    },
		    getUserInfo() {
		      if (this.util.getStorageSync('session'))
		        this.HttpService.signIn()
		    },
		    alert() {
		    	this.shoWx = !this.shoWx
		    },
		    clickBtn() {
		    	console.log(1)
		    }
		}
	}
</script>



<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	::-webkit-scrollbar
		width: 0


	.clickme
		display: flex
		justify-content: center
		align-items: center
		position: fixed
		bottom: 0
		left: 0
		right: 0
		z-index: 99
		height: 44px
		background-color: $mc
		font-size: 20px
		color: #fff
		cursor: pointer
		i
			margin-right: 4px
	.content
		height: 100%
		width: 100%	
		line-height: 28px
		font-size: 16px
		-moz-column-count:1 /* Firefox */
		-webkit-column-count:1 /* Safari and Chrome */
		column-count:1
	.page
		box-sizing: content-box
		display: flex
		position: fixed
		left: 0
		bottom: 44px
		right: 0
		height: 30px
		padding: 0 10px
		border-top: 2px solid $mc
		line-height: 30px
		.status
			width: 60px
			hh(30px)
			text-align: right
			no-wrap()
			em
				padding: 0 3px
				font-style: normal
				&:first-child
					font-weight: bold
					color: $mc
					font-size: 13px
		p
			flex: 1
	.btn-wrap
		display: flex
		position: fixed
		left: 0
		top: 50px
		right: 0
		bottom: 76px
		i
			width: 50%
			height: 100%

	.loading
		position: fixed
		top: 50px
		bottom: 55px
		left: 0
		right: 0
		z-index: 999
		width: auto
		height: auto
	.main 
		bottom: 0 !important		
	
	.alert-enter-active, .alert-leave-active
		transiti(all, 0.4s, ease)
	.alert-enter
		transform: scale(0)
	.alert-leave
		transform: scale(1)
		
	.bottom-enter-active, .bottom-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.bottom-enter
		transform: translate3d(0, 55px, 0)
	.bottom-leave
		transform: translate3d(0, 0px, 0)
</style>